<template>
	<div class="vue-box">
		<el-dialog
			v-if="m"
			:title="m.empno == 0 ? '数据增加' : '数据修改'"
			:visible.sync="isShow"
			width="400px"
			top="25vh"
			:append-to-body="true"
			:destroy-on-close="true"
			:close-on-click-modal="false"
			custom-class="full-dialog"
		>
		<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
		<el-form-item label="人员编号" prop="empno">
			<el-input v-model="empno"></el-input>
		</el-form-item>
		<el-form-item label="人员姓名" prop="ename">
			<el-input v-model="ename"></el-input>
		</el-form-item>
		<el-form-item label="职务" prop="job">
			<el-select v-model="job" placeholder="请选择职务">
				<el-option v-for="jb in jobs" :label="jb.label" :value="jb.value" :key="jb.value"></el-option>
			</el-select>
		</el-form-item>
		
		<el-form-item label="入职日期" required>
			<el-form-item prop="hiredate">
				<el-date-picker type="date" placeholder="选择日期" v-model="hiredate" style="width: 100%;"></el-date-picker>
			</el-form-item>
		</el-form-item>
		
		<el-form-item label="上级领导" prop="mgr">
			<el-autocomplete
			class="inline-input"
			v-model="mgr"
			:fetch-suggestions="querySearch"
			placeholder="请输入内容" >
			</el-autocomplete>
		</el-form-item>
		<el-form-item label="活动性质" prop="type">
			<el-checkbox-group v-model="ruleForm.type">
			<el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
			<el-checkbox label="地推活动" name="type"></el-checkbox>
			<el-checkbox label="线下主题活动" name="type"></el-checkbox>
			<el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
			</el-checkbox-group>
		</el-form-item>
		<el-form-item label="特殊资源" prop="resource">
			<el-radio-group v-model="ruleForm.resource">
			<el-radio label="线上品牌商赞助"></el-radio>
			<el-radio label="线下场地免费"></el-radio>
			</el-radio-group>
		</el-form-item>
		<el-form-item label="活动形式" prop="desc">
			<el-input type="textarea" v-model="ruleForm.desc"></el-input>
		</el-form-item>
		<el-form-item>
			<el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
			<el-button @click="resetForm('ruleForm')">重置</el-button>
		</el-form-item>
		</el-form>
		</el-dialog>
	</div>
</template>

<script>
	export default{
		data(){
			return {
				jobs:[
					{label:"办事员",value:"sales"},
					{label:"管理员",value:"manager"},
					{label:"分析员",value:"anagler"}
				],
				isShow:false,
				m:null,
				ist:false
			}
		},
		methods:{
			open:function (t){
				this.isShow = true;
				this.ist = t ===0?false:true;
				this.m = this.init(t);
			},
			init:function (t){
				if(t === 0){
					this.m = {
						empno:0,
						ename:'',
						job:''
					};
					return ;
				}
			},
			querySearch:function (queryString, cb){
				var restaurants = this.restaurants;
				var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
				// 调用 callback 返回建议列表的数据
				cb(results);
			},
			createFilter(queryString) {
				return (restaurant) => {
					return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
				};
			},
			loadAll() {
				return [
					{ "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },
					{ "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },
					{ "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" }
				];
			},
		},
		mounted() {
			this.restaurants = this.loadAll();
		}
	}
</script>

<style scoped="scoped">
	.c-panel{margin: 0px; padding: 0px 20px;}
</style>